<script setup>
import { onMounted } from 'vue'
import { useUserStore } from './stores/user'
import { useRouter, useRoute } from 'vue-router'
import headerIndex from '@/views/header/index.vue'
import asideIndex from '@/views/aside/index.vue'
import mainIndex from '@/views/main/index.vue'
import footerIndex from '@/views/footer/index.vue'

const userStore = useUserStore()
// const router = useRouter()
const route = useRoute()

console.log(route.path)

// 判断本地是否有用户信息
// 用于存储到仓库中
const checkStorage = () => {
  const userState = JSON.parse(sessionStorage.getItem('userState'))
  if (userState) {
    // console.log('userState', userState)
    const { username, password, token } = userState
    // 存在用户信息
    // 存储到仓库中
    userStore.setUser(username, password, token)
  } else {
    // 不存在用户信息
    // 清除仓库中的用户信息
    userStore.removeUser()
  }
}

onMounted(() => {
  const DEFAULT_SCREEN = {
    width: 1920,
    height: 1580
  }
  // 只考虑长>宽的情形
  const setDOMStyle = () => {
    const dom = document.getElementById('mainApp')

    const height = (DEFAULT_SCREEN.height * window.innerHeight) / DEFAULT_SCREEN.width
    dom.style.height = height + 'px'
  }
  window.onresize = setDOMStyle
  setDOMStyle()
  checkStorage()
})
</script>

<template>
  <div class="common-layout" id="mainApp">
    <router-view v-if="route.path === '/login' || route.path === '/register'"></router-view>
    <el-container v-else>
      <el-header>
        <headerIndex />
      </el-header>
      <el-container>
        <el-aside width="200px">
          <asideIndex />
        </el-aside>
        <el-container>
          <el-main> <mainIndex /> </el-main>
          <el-footer> <footerIndex /> </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<style lang="scss" scoped>
.common-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 确保容器至少占据视窗高度 */
}

.el-header {
  padding: 0;
  width: 100%;
  height: 80px;
  background-color: #fff;
}

.el-aside {
  height: 100%; /* 使用百分比高度 */
  background-color: #fff;
}

.el-main {
  // flex: 1;
  max-height: 920px;
  overflow-y: auto;
  background-color: #f2f1f6; /* 设置背景颜色。 */

  &::-webkit-scrollbar {
    width: 5px; /* 设置滚动条的宽度为 5 像素。 */
  }

  &::-webkit-scrollbar-track {
    background: #f1f1f1; /* 设置滚动条轨道的背景颜色为浅灰色。 */
  }

  &::-webkit-scrollbar-thumb {
    background: #888; /* 设置滚动条滑块的背景颜色为深灰色。 */
  }

  &::-webkit-scrollbar-thumb:hover {
    background: #555; /* 当鼠标悬停在滚动条滑块上时，背景颜色变为更深的灰色。 */
  }
}

.el-footer {
  height: 80px;
  z-index: 999;
}
</style>
